<template>
  <div>
    <el-card shadow="never" class="mb-20">
      <div slot="header" class="clearfix">
        <span>招标规则</span>
      </div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="报名截止时间" required>
          <el-date-picker
            v-model="data"
            type="datetime"
            class="filter-item"
            placeholder="选择日期时间"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="报价币种" required>
          <el-radio-group v-model="form.type1">
            <el-radio label="人民币" name="type"></el-radio>
            <el-radio label="其他" name="type"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="支付方式" required>
          <el-checkbox-group v-model="form.payway">
            <el-checkbox label="电汇"></el-checkbox>
            <el-checkbox label="承兑"></el-checkbox>
            <el-checkbox label="支票"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="交易方式" required>
          <el-radio-group v-model="form.type">
            <el-radio label="账期" name="type"></el-radio>
            <el-radio label="分阶段支付" name="type"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商务条款">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="技术条款">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="结果公示">
          <el-checkbox-group v-model="form.type3">
            <el-checkbox label="公开投标与中标供应商" name="type"></el-checkbox>
            <el-checkbox label="公开中标价格" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="mb-20">
      <div slot="header" class="clearfix">
        <span>附件</span>
      </div>
      <el-upload
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
      </el-upload>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: "",
        type1: "",
        type2: "",
        type3: [],
        resource: "",
        desc: "",
        payway: "",
      },
      list: [
        {
          name: "南京玄建物资实业有限公司",
          score: "A",
          year: "无",
          serve: "有",
        },
        {
          name: "扬州奔牛工贸实业有限公司",
          score: "A",
          year: "无",
          serve: "无",
        },
        {
          name: "上海圣南实业有限公司",
          score: "A",
          year: "无",
          serve: "无",
        },
      ],
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>